<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/axios.min.js"></script>
  </head>
  <body>
    <form action="">
      <input type="text" name="" id="" />
      <input type="text" name="" id="" />
      <input type="submit" name="" id="" value="登录" />
    </form>
    <script>
      /* 
        1-引入 axios
        2-结构 和样式
        3-点击注册按钮的时候-获取输入框的值-
        4-发起注册请求-注册成功(数据怎么处理--分析-打印数据)-跳转登录
            aixios --get --params 不要拼错

   注册接口
    接口地址：http://jx.xuzhixiang.top/ap/api/reg.php
    接口请求方式：get
    接口参数：
         username用户名
         password密码
        */
      //    3-
      let ipts = document.querySelectorAll("input");
      ipts[2].onclick = function (evt) {
        //发起的注册请求--注册接口 需要什么参数  想法获取这些参数
        let username = ipts[0].value;
        let password = ipts[0].value;
        // 4-发起注册请求-注册成功-跳转登录
        let loginAPI = "http://jx.xuzhixiang.top/ap/api/login.php";

        let p = axios.get(loginAPI, {
          params: { username: username, password },
        });
        p.then((r) => {
          // r axios处理的结果
          console.log(r);
          //成功 服务器返回的数据
          console.log(r.data);
          if (r.data.code == 0) {
            alert(r.data.msg);
          } else {
            alert(r.data.msg);
            console.log(r.data.data.id);
            // 存入 本地
            localStorage.setItem("id", r.data.data.id);
            localStorage.setItem("loginId", r.data.data.id);

            // token: "9e960402a7672e1f3951a7acab61386a"
            // ****登录的令牌 ，登录的凭证--一般是的登录的时候返回--
            localStorage.setItem("token", r.data.data.token);
            localStorage.setItem("loginToken", r.data.data.token);
            // loginToken
            //-登录成功-跳转登录
            location.href = "商品管理.html";
          }
        });
        evt.preventDefault();
      };
    </script>
  </body>
</html>
